<template>
    <div class="header-wrap">
        <div class="header">
            <!-- logo -->
            <div style="height: 100%;display:flex;">
                <router-link to="/sh/main" class="header-logo">
                    <img src="../assets/svg/logo.svg" style="height: 60px;"/>
                    <h1 class="name">学了么</h1>
                </router-link>
                
                <!-- 会员中心按钮 -->
                <div class="vip-center-btn-wrapper">
                    <router-link to="/sh/true/vip" class="vip-center-btn">
                        <span class="vip-text">会员中心</span>
                        <span class="vip-badge">VIP</span>
                    </router-link>
                </div>
                
                <!-- 导航区 -->
                <ul class="header-nav">
                    <!-- 会员中心按钮 - 隐藏但保留逻辑 -->
                    <li class="member-link-wrapper" style="display: none;">
                        <router-link to="/member/center" class="member-link">
                            会员中心
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/home/course/student">
                            课程中心
                        </router-link>
                    </li>
                    <li >
                        <router-link to="/communication">
                            交流中心
                        </router-link>
                    </li>
                    <!-- VIP中心按钮 - 隐藏但保留逻辑 -->
                    <li class="vip-center-link-wrapper" style="display: none;">
                        <router-link to="/vip" class="vip-center-link">
                            VIP中心
                            <span class="vip-badge">VIP</span>
                        </router-link>
                    </li>
                </ul>
            </div>
            <!-- 信息区 -->
            <ul class="header-info">
                <li class="header-search">
                    <!-- <a-input-search :style="{width:'320px'}" placeholder="搜索一下吧~~~" search-button /> -->
                </li>

                <!-- 通知按钮 -->
                <li>
                    <NoticeButton ref="noticeButtonRef" />
                </li>



                <li>
                    <a-dropdown trigger="hover">
                        <div class="user-info">
                            <AAvatar class="avatar" :image-url="getImageUrl(userInfo?.picture)">
                                
                            </AAvatar>
                            <p class="user-name">{{userInfo?.nickname??"未登录"}}</p>
                        </div>
                        <template #content>
                            <a-doption>
                            <a-space @click="showUserModal">
                                <icon-user />
                                <span>
                                    用户中心
                                </span>
                            </a-space>
                            </a-doption>
                            <a-doption>
                            <a-space @click="logout">
                                <icon-export />
                                <span>
                                    退出登录
                                </span>
                            </a-space>
                            </a-doption>
                        </template>
                        </a-dropdown>
                </li>
            </ul>
        </div>
        
        <!-- 用户信息弹框 - 学者档案 -->
        <a-modal 
            v-model:visible="userModalVisible" 
            title="学者档案"
            :footer="false"
            width="550px"
            @cancel="userModalVisible = false"
            class="academic-modal"
        >
            <div class="user-modal-content">
                <!-- 装饰性背景 -->
                <div class="decorative-bg">
                    <div class="circle circle-1"></div>
                    <div class="circle circle-2"></div>
                    <div class="circle circle-3"></div>
                </div>
                
                <!-- 用户头像区域 -->
                <div class="profile-header">
                    <div class="avatar-container">
                        <a-upload
                            :custom-request="customRequest"
                            :show-file-list="false"
                            accept="image/*"
                        >
                            <template #upload-button>
                                <div class="avatar-wrapper">
                                    <AAvatar 
                                        :size="120" 
                                        :image-url="getImageUrl(userInfo?.picture)"
                                        class="user-avatar"
                                    >
                                    </AAvatar>
                                    <div class="avatar-overlay">
                                        <icon-camera :size="28" />
                                        <span>更换</span>
                                    </div>
                                </div>
                            </template>
                        </a-upload>
                        <!-- VIP标识 -->
                        <div class="vip-badge" v-if="userInfo?.isVip">
                            <span>VIP</span>
                        </div>
                    </div>
                    
                    <div class="user-title">
                        <h2>{{ userInfo?.nickname || '学者' }}</h2>
                        <p class="username">@{{ userInfo?.username || 'user' }}</p>
                    </div>
                </div>
                
                <!-- 用户信息卡片 -->
                <div class="profile-content">
                    <!-- 基本信息区 -->
                    <div class="info-section">
                        <div class="section-header">
                            <icon-user />
                            <span>基本信息</span>
                        </div>
                        
                        <div class="info-list">
                            <div class="info-item">
                                <div class="item-label">
                                    <icon-user-group />
                                    <span>用户名</span>
                                </div>
                                <div class="item-value">{{ userInfo?.username || '未设置' }}</div>
                            </div>
                            
                            <div class="info-item">
                                <div class="item-label">
                                    <icon-star />
                                    <span>昵称</span>
                                </div>
                                <div class="item-value">{{ userInfo?.nickname || '未设置' }}</div>
                            </div>
                            
                            <div class="info-item" v-if="baseUserInfo?.email">
                                <div class="item-label">
                                    <icon-email />
                                    <span>邮箱</span>
                                </div>
                                <div class="item-value">{{ baseUserInfo.email }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮区 -->
                    <div class="action-section">
                        <div class="section-header">
                            <icon-settings />
                            <span>账户管理</span>
                        </div>
                        
                        <div class="action-buttons">
                            <button class="action-btn primary-btn" @click="handleEditNickname">
                                <icon-edit />
                                <span>修改昵称</span>
                                <icon-right />
                            </button>
                            
                            <button class="action-btn" @click="handleChangePassword">
                                <icon-lock />
                                <span>修改密码</span>
                                <icon-right />
                            </button>
                        </div>
                    </div>
                    
                    <!-- 学习统计 -->
                    <div class="stats-section">
                        <div class="stat-item">
                            <div class="stat-icon">📚</div>
                            <div class="stat-content">
                                <div class="stat-label">学习课程</div>
                                <div class="stat-value">{{ userInfo?.courseCount || 0 }}</div>
                            </div>
                        </div>
                        
                        <div class="stat-divider"></div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">✅</div>
                            <div class="stat-content">
                                <div class="stat-label">完成考试</div>
                                <div class="stat-value">{{ userInfo?.examCount || 0 }}</div>
                            </div>
                        </div>
                        
                        <div class="stat-divider"></div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">🏆</div>
                            <div class="stat-content">
                                <div class="stat-label">学习时长</div>
                                <div class="stat-value">{{ userInfo?.studyHours || 0 }}h</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import useUserStore from '../sotre/user-store';
import NoticeButton from './notice/NoticeButton.vue';
import {ref, onMounted} from 'vue'
import { uploadAvatar } from '../apis/file-api'
import { imageUploadHandle, getImageUrl } from '../utils/image'
import { Message } from '@arco-design/web-vue';

const userStore=useUserStore();
const userInfo=userStore.userInfo;
const baseUserInfo=userStore.baseUserInfo;
const router=useRouter()
const noticeButtonRef = ref(null)
const userModalVisible = ref(false)

const logout=()=>{
    userStore.logOut()
    router.push({name:"Login"})
}

// 显示用户信息弹框
const showUserModal = () => {
    userModalVisible.value = true
}

// 复用原有的头像上传功能
const customRequest = (options) => {
    return imageUploadHandle(options, uploadAvatar, (res) => {
        const path = res.data.data;
        // 更新用户信息中的头像
        userStore.userInfo.picture = path
        userStore.baseUserInfo.picture = path
        Message.success('头像更新成功')
    })
}

// 修改昵称 - 暂未实现
const handleEditNickname = () => {
    Message.info('昵称修改功能开发中，敬请期待...')
    // TODO: 实现昵称修改功能
}

// 修改密码 - 暂未实现
const handleChangePassword = () => {
    Message.info('密码修改功能开发中，敬请期待...')
    // TODO: 实现密码修改功能
}

// WebSocket消息处理
onMounted(() => {
  // 监听WebSocket消息
  if (window.SocketService) {
    const originalMessage = window.SocketService.Instance.message
    window.SocketService.Instance.message = function(recvData) {
      // 调用原始的message方法
      originalMessage.call(this, recvData)
      
      // 处理通知消息
      if (recvData.code === 'NOTICE_MESSAGE' && noticeButtonRef.value) {
        noticeButtonRef.value.handleWebSocketMessage(recvData)
      }
    }
  }
})
</script>
<style lang="less" scope>
:deep(.arco-trigger-popup){
    padding: 10px;
}
.arco-dropdown-open .arco-icon-down {
  transform: rotate(180deg);
}
a {
    text-decoration: none;
    color: inherit;
}
.header-wrap {
    background-color: var(--color-bg-1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: var(--color-text-2);
    padding: 0 30px;
    z-index: 100; /* 提高头部导航的层级 */
    .header {
        display: flex;
        height: 100%;
        justify-content: space-between;

        .header-logo {
           display: flex;
           align-items: center;
           margin-right: 20px;
           .name{
            text-align: center;
            font-weight: 900;
            font-size: 36px;
            margin-left: 10px;
            color: var(--color-text-2);
           }
        }
        
        .vip-center-btn-wrapper {
            display: flex;
            align-items: center;
            margin-right: 12px;
            
            .vip-center-btn {
                position: relative;
                display: inline-block;
                padding: 8px 20px;
                padding-right: 32px; /* 为VIP角标留出空间 */
                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                border-radius: 20px;
                text-decoration: none;
                box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
                transition: all 0.3s ease;
                
                .vip-text {
                    position: relative;
                    color: white;
                    font-weight: 600;
                    font-size: 15px;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                }
                
                .vip-badge {
                    position: absolute;
                    top: -8px;
                    right: -8px;
                    background: linear-gradient(135deg, #ff0000 0%, #ff4757 100%);
                    color: white;
                    padding: 4px 8px;
                    border-radius: 10px;
                    font-size: 9px;
                    font-weight: 700;
                    line-height: 1;
                    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.6);
                    animation: flash 2s infinite;
                }
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.5);
                    background: linear-gradient(135deg, #4295ea 0%, #00d9e4 100%);
                }
            }
        }

        .header-nav {
            display: flex;
            align-items: center;
            
            li {
                padding: 10px 15px;
                margin: 0 2px;
                border-radius: 4px;
                transition: all .3s;

                &:hover {
                    background-color: var(--color-fill-2);
                }

                &.member-link-wrapper, &.communication-link-wrapper {
                    padding: 0;
                    margin: 0 5px;
                    
                    &:hover {
                        background-color: transparent;
                    }
                }
                
                &.member-link-wrapper .member-link {
                    display: block;
                    padding: 10px 15px;
                    margin: 0;
                    border-radius: 6px;
                    background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%);
                    color: white;
                    font-weight: 600;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
                    
                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
                        background: linear-gradient(135deg, #ff5252 0%, #ffcc02 100%);
                    }
                }
                
                &.communication-link-wrapper .communication-link {
                    display: block;
                    padding: 10px 15px;
                    margin: 0;
                    border-radius: 6px;
                    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                    color: white;
                    font-weight: 600;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
                    
                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
                        background: linear-gradient(135deg, #4295ea 0%, #00d9e4 100%);
                    }
                }
                
                &.vip-center-link-wrapper .vip-center-link {
                    display: block;
                    padding: 10px 15px;
                    margin: 0;
                    border-radius: 6px;
                    background: linear-gradient(135deg, #ffd700 0%, #ff6b35 100%);
                    color: white;
                    font-weight: 600;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
                    position: relative;
                    
                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
                        background: linear-gradient(135deg, #ffcc00 0%, #ff5722 100%);
                    }
                    
                    .vip-badge {
                        position: absolute;
                        top: -8px;
                        right: -8px;
                        background: linear-gradient(135deg, #ff0000 0%, #ff6b35 100%);
                        color: white;
                        padding: 2px 6px;
                        border-radius: 10px;
                        font-size: 10px;
                        font-weight: 700;
                        line-height: 1;
                        box-shadow: 0 2px 4px rgba(255, 0, 0, 0.3);
                        animation: pulse 2s infinite;
                    }
                }

            }
        }

        .header-info {
            display: flex;
            align-items: center;
            .nav-btn {
                border-color: rgb(var(--gray-2));
                color: rgb(var(--gray-8));
                font-size: 16px;
                }
            li {
                margin: 0 10px;
            }
            .user-info{
                display: flex;
                align-items: center;
                .avatar{
                    flex-shrink: 0;
                }
                .user-name{
                    margin-left: 4px;
                    overflow: hidden;   
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}

// 现代化学者档案弹框样式
.academic-modal {
    :deep(.arco-modal-header) {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
        font-weight: 600;
        border-radius: 12px 12px 0 0;
        padding: 24px;
        
        .arco-modal-title {
            color: white;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        .arco-modal-close-btn {
            color: rgba(255, 255, 255, 0.9);
            &:hover {
                color: white;
                background: rgba(255, 255, 255, 0.15);
            }
        }
    }
    
    :deep(.arco-modal-body) {
        padding: 0;
        background: #f5f7fa;
        border-radius: 0 0 12px 12px;
        position: relative;
        overflow: hidden;
    }
}

.user-modal-content {
    position: relative;
    padding: 0;
    
    // 装饰性背景
    .decorative-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        
        .circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(102, 126, 234, 0.05);
            
            &.circle-1 {
                width: 200px;
                height: 200px;
                top: -100px;
                right: -50px;
                animation: float 8s ease-in-out infinite;
            }
            
            &.circle-2 {
                width: 150px;
                height: 150px;
                bottom: -75px;
                left: -50px;
                animation: float 10s ease-in-out infinite reverse;
            }
            
            &.circle-3 {
                width: 100px;
                height: 100px;
                top: 50%;
                left: 20px;
                animation: float 12s ease-in-out infinite;
            }
        }
    }
    
    // 头像和标题区域
    .profile-header {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 40px 30px 30px;
        background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%);
        
        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
            
            .avatar-wrapper {
                position: relative;
                display: inline-block;
                cursor: pointer;
                
                .user-avatar {
                    border: 4px solid white;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                    transition: all 0.3s ease;
                }
                
                .avatar-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(102, 126, 234, 0.9);
                    color: white;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    border-radius: 50%;
                    font-size: 13px;
                    font-weight: 600;
                    backdrop-filter: blur(4px);
                    gap: 4px;
                }
                
                &:hover {
                    .user-avatar {
                        transform: scale(1.05);
                        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
                    }
                    
                    .avatar-overlay {
                        opacity: 1;
                    }
                }
            }
            
            .vip-badge {
                position: absolute;
                bottom: 0;
                right: -5px;
                background: linear-gradient(135deg, #ffd700 0%, #ff6b35 100%);
                padding: 4px 12px;
                border-radius: 20px;
                box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
                border: 2px solid white;
                
                span {
                    font-size: 12px;
                    font-weight: 700;
                    color: white;
                    letter-spacing: 1px;
                }
            }
        }
        
        .user-title {
            h2 {
                font-size: 28px;
                font-weight: 700;
                color: #2c3e50;
                margin: 0 0 8px 0;
            }
            
            .username {
                font-size: 14px;
                color: #8492a6;
                font-weight: 500;
                margin: 0;
            }
        }
    }
    
    // 内容区域
    .profile-content {
        position: relative;
        z-index: 1;
        padding: 0 30px 30px;
        
        // 基本信息区
        .info-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            
            .section-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                color: #667eea;
                font-weight: 600;
                font-size: 15px;
            }
            
            .info-list {
                .info-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 12px 0;
                    border-bottom: 1px solid #f0f0f0;
                    
                    &:last-child {
                        border-bottom: none;
                    }
                    
                    .item-label {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        color: #5a6c7d;
                        font-size: 14px;
                    }
                    
                    .item-value {
                        color: #2c3e50;
                        font-weight: 600;
                        font-size: 14px;
                    }
                }
            }
        }
        
        // 操作按钮区
        .action-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            
            .section-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                color: #667eea;
                font-weight: 600;
                font-size: 15px;
            }
            
            .action-buttons {
                display: flex;
                flex-direction: column;
                gap: 10px;
                
                .action-btn {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 14px 16px;
                    border: 2px solid #e8eaed;
                    background: white;
                    border-radius: 10px;
                    font-size: 14px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    color: #5a6c7d;
                    gap: 10px;
                    
                    &:hover {
                        border-color: #667eea;
                        background: #f8f9ff;
                        transform: translateX(4px);
                        
                        span {
                            color: #667eea;
                        }
                    }
                    
                    &.primary-btn {
                        border-color: #667eea;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        
                        &:hover {
                            transform: translateX(4px) translateY(-2px);
                            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
                        }
                    }
                    
                    span {
                        flex: 1;
                        text-align: left;
                        margin-left: 4px;
                    }
                }
            }
        }
        
        // 学习统计
        .stats-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 24px 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
            
            .stat-item {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .stat-icon {
                    font-size: 32px;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                }
                
                .stat-content {
                    .stat-label {
                        font-size: 12px;
                        color: rgba(255, 255, 255, 0.9);
                        margin-bottom: 4px;
                    }
                    
                    .stat-value {
                        font-size: 20px;
                        font-weight: 700;
                        color: white;
                    }
                }
            }
            
            .stat-divider {
                width: 1px;
                height: 40px;
                background: rgba(255, 255, 255, 0.3);
            }
        }
    }
}

// 动画
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}
</style>